<template>
    <div>
        <h1>
            {{ dateTitle }}
        </h1>
        <div style="width: 50%; margin: 0 auto;">
            <div>
                <el-form ref="dayTwoForm" :model="dtForm" :rules="dtfRules">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="dtForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="dtForm.age"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="籍贯" prop="hometown">
                        <el-select v-model="dtForm.hometown">
                            <el-option label="四川" value="jg01"></el-option>
                            <el-option label="重庆" value="jg02"></el-option>
                            <el-option label="北京" value="jg03"></el-option>
                            <el-option label="上海" value="jg04"></el-option>
                        </el-select>
                    </el-form-item>-->
                    <el-form-item label="籍贯" prop="hometown">
                        <el-select v-model="dtForm.hometown" @change="getHometownSel">
                            <el-option v-for="item in hometownOption" :key="item.value" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="dtForm.gender">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="爱好" prop="hobby">
                        <el-checkbox-group v-model="dtForm.hobby">
                            <el-checkbox label="篮球"></el-checkbox>
                            <el-checkbox label="羽毛球"></el-checkbox>
                            <el-checkbox label="乒乓球"></el-checkbox>
                            <el-checkbox label="足球"></el-checkbox>
                            <el-checkbox label="跑步"></el-checkbox>
                            <el-checkbox label="跳绳"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="地址" prop="addr">
                        <el-input v-model="dtForm.addr"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="dtForm.remarks"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthDate">
                        <el-date-picker type="date" v-model="dtForm.birthDate" placeholder="请选择出生日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="confirmSubmit('dayTwoForm')">
                            确认
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div id="dtFormDataInfo"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return{
            dateTitle: '2020-11-04',
            hometownOption: [
                {
                    value: 'jg01',
                    label: '四川'
                },
                {
                    value: 'jg02',
                    label: '重庆'
                },
                {
                    value: 'jg03',
                    label: '北京'
                },
                {
                    value: 'jg04',
                    label: '上海'
                }
            ],
            dtForm: {
                name: '',
                age: '',
                hometown: '',
                gender: '',
                hobby: [],
                addr: '',
                remarks: '',
                birthDate: ''
            },
            dtfRules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名（必填）',
                        trigger: 'blur'
                    }
                ],
                age: [
                    {
                        required: true,
                        message: '请输入年龄（必填）',
                        trigger: 'blur'
                    }
                ],
                hometown: [
                    {
                        required: true,
                        message: '请选择籍贯（必选项）',
                        trigger: 'change'
                    }
                ],
                gender: [
                    {
                        required: true,
                        message: '请选择性别（必选项）',
                        trigger: 'change'
                    }
                ],
                hobby: [
                    {
                        required: true,
                        message: '请至少选择一个爱好',
                        trigger: 'change'
                    }
                ],
                addr: [
                    {
                        required: true,
                        message: '请输入地址（必填）',
                        trigger: 'blur'
                    }
                ],
                remarks: [
                    {
                        required: true,
                        message: '备注也是必填项喔！',
                        trigger: 'blur'
                    }
                ],
                birthDate: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择出生日期（必选项）',
                        trigger: 'change'
                    }
                ]
            },
            ttt:''
        }
    },
    methods: {
        getHometownSel(val){
            // let obj = {};
            // let hometownOption = this.hometownOption;
            // obj = hometownOption.find((item) => {
            //     return item.value === val;
            // });
            //console.log(obj.value);
            //console.log(obj.label);
            //console.log(hometownOption);
            this.ttt = val;
            //console.log(val);
        },

        confirmSubmit(formName){
            // this.$options.methods.getHometownSel(this)
            let { name, age, hometown, gender, hobby, addr, remarks, birthDate } = this.dtForm;
            let formInf = document.getElementById('dtFormDataInfo');
            this.$refs[formName].validate((valid) => {
                if(valid){
                    formInf.innerHTML = '<p><strong>表单输入的信息如下所示，</strong></p>' 
                                      + '<p>姓名：' + name +'</p>' 
                                      + '<p>年龄：' + age + '</p>' 
                                      + '<p>籍贯：' + hometown + '</p>' 
                                      + '<p>性别：' + gender + '</p>' 
                                      + '<p>爱好：' + hobby + '</p>' 
                                      + '<p>地址：' + addr + '</p>' 
                                      + '<p>备注：' + remarks + '</p>' 
                                      + '<p>出生日期：' + birthDate + '</p>';
                }else{
                    formInf.innerHTML = '以上所有项都为必填项喔！';
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped>
    .el-form {
        width: 100%;
    }
    .el-select {
        width: 100%;
    }
    .el-select-dropdown__item {
        display: block;
    }
</style>